<script>
export default {
  name: "my-Newlibrary",
};
</script>
<script setup>
import Breadcrumb from "../../layout/Breadcrumb.vue";
import { reactive, ref } from "vue";
import { regionData, codeToText } from "element-china-area-data";

//省级地区
let options = ref(regionData);
const handleChange = (value) => {
  let provinceCode = value[0]; //省编码
  let cityCode = value[1]; //市编码
  let province = codeToText[value[0]]; //省中文
  let city = codeToText[value[1]]; //市中文
};

//name输入框
const formInline = reactive({
  /* 图书馆名称 */
  user: "",
  /* 详细地址 */
  location: "",
  /* 图书馆经纬度 */
  latitude: "",
  /* 结算周期 */
  region: "",
  /* 结算比例 */
  settlement: "",
  /* 开会银行 */
  bank: "",
  /* 银行卡号 */
  cardNo: "",
  /* 真实姓名 */
  trueName: "",
  /* 身份证号 */
  idno: "",
  /* 电话号码 */
  phone: "",
});
</script>

<template>
  <div class="Bread">
    <Breadcrumb />
  </div>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <div class="top">
      <el-form-item label="图书馆名称:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.user"
          placeholder="请输入"
        />
      </el-form-item>
    </div>

    <div class="top-Address">
      <el-form-item label="所在地址:">
        <el-cascader
          placeholder="请选择"
          :options="options"
          @change="handleChange"
          style="width: 300px"
        ></el-cascader>
      </el-form-item>
    </div>

    <!-- 详细地址 -->
    <div>
      <el-form-item label="详细地址:" class="top-location">
        <el-input
          style="width: 300px"
          v-model="formInline.location"
          placeholder="请输入"
        />
      </el-form-item>
    </div>

    <!-- 图书馆经纬度 -->
    <div>
      <el-form-item label="图书馆经纬度:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.latitude"
          placeholder="请输入"
        />
      </el-form-item>
    </div>

    <!-- 结算周期 -->
    <div>
      <el-form-item label="结算周期">
        <el-select v-model="formInline.region" placeholder="一个月">
          <el-option label="一个月" value="一个月" />
          <el-option label="二个月" value="二个月" />
          <el-option label="三个月" value="三个月" />
          <el-option label="四个月" value="四个月" />
          <el-option label="五个月" value="五个月" />
          <el-option label="六个月" value="六个月" />
          <el-option label="七个月" value="七个月" />
          <el-option label="八个月" value="八个月" />
          <el-option label="九个月" value="九个月" />
          <el-option label="十个月" value="十个月" />
          <el-option label="十一个月" value="十一个月" />
          <el-option label="十二个月" value="十二个月" />
        </el-select>
      </el-form-item>
    </div>

    <!-- 结算比例 -->
    <div>
      <el-form-item label="结算比例:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.settlement"
          placeholder="请输入"
        />%
      </el-form-item>
    </div>

    <!-- 开会银行 -->
    <div>
      <el-form-item label="开会银行:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.bank"
          placeholder="请输入"
        />
      </el-form-item>
    </div>
    <!-- 银行卡号 -->
    <div>
      <el-form-item label="银行卡号:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.cardNo"
          placeholder="请输入"
        />
      </el-form-item>
    </div>

    <!-- 真实姓名 -->
    <div>
      <el-form-item label="真实姓名:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.trueName"
          placeholder="请输入"
        />
      </el-form-item>
    </div>

    <!-- 身份证号 -->
    <div>
      <el-form-item label="身份证号:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.idno"
          placeholder="请输入"
        />
      </el-form-item>
    </div>

    <!-- 手机号 -->
    <div>
      <el-form-item label="手机号:" class="top-name">
        <el-input
          style="width: 300px"
          v-model="formInline.phone"
          placeholder="请输入"
        />
      </el-form-item>
    </div>
  </el-form>
</template>

<style scoped lang="scss">
.demo-form-inline {
  width: 100%;
  height: 100%;
  background-color: #fff;
}

//图书馆名称
.top {
  padding-top: 20px;
  margin-left: 100px;
}

//所在地址
.top-Address {
  padding-top: 10px;
  margin-left: 112px;
}

//面包屑
.Bread {
  background-color: #fff;
  padding-top: 20px;
  padding-left: 20px;
}
</style>
